<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.item{
				width: 300px;
				height: 350px;
				border: 2px solid red;
				float: left;
				margin: 5px;
			}
			.item img{
				width: 100%;
			}
			.content{
				width: 1260px;
				margin: 30px auto;
				background-color: burlywood;
				padding: 10px;
				overflow: hidden;
			}
			.header{
				width: 1200px;
				height: 50px;
				margin: 30px auto;
				background-color: cyan;
				overflow: hidden;
			}
			.city_item{
				width: 200px;
				height: 40px;
				float: left;
				margin-left: 20px;
				background-color: burlywood;
			}
			.city_item:hover{
				background-color: red;
				color: white;
			}
		</style>
	</head>

	<body>
		<!--头部-->
		<div class="header">
		
		</div>
		<!--内容-->
		<div class="content">
			
		</div>
		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
//		获取房源
		function getHouse(id) {
			$.ajax({
				type: "get",
				url: "http://120.48.109.174:8081/houses",
				data: {
					"cityId": id
				},
				success: function(res) {
//					console.log(res)
//					获取房子数组
					var fangzi = res.body.list;
					$(".content").html("");
//					遍历房子（循环）
					$.each(fangzi, function(index,item) {
//						渲染
						console.log(index,item)
						var str = `
								<div class="item">
									<h2>${item.title}</h2>
									<img src="http://120.48.109.174:8081${item.houseImg}"/>
								</div>
						`;
						$(".content").append(str)
					});
				}
			});
		}
		
//		getHouse("AREA|dbf46d32-7e76-1196")
		
		//获取地区的方法
		function getCitys(){
			$.ajax({
				type:"get",
				url:"http://120.48.109.174:8081/area/hot",
				async:true,
				success:function(res){
	//				console.log(res.body)
					var citys = res.body;
					
					$.each(citys, function(index,item) {
						var str = `
							<div class="city_item" data-id="${item.value}">${item.label}</div>
						`;
						$(".header").append(str);
						
					});
					
					$(".city_item").click(function(){
						
					  	var id = $(this).attr("data-id");
						console.log(id)
						getHouse(id)
						
					})
				}
				
			});
		}
		
		getCitys()

		
	</script>

</html>